<template>
    <div class="footer">
        <!-- <h1>{{msg}}</h1> -->
        <!-- <div>这是底部！</div> -->
        <ul>
                <li>
                    <span class="iconfont icon-user"></span>
                    <span>首页</span>
                </li>
                <li>
                    <span class="iconfont icon-user"></span>
                    <span>首页</span>
                </li>
                <li>
                    <span class="iconfont icon-user"></span>
                    <span>首页</span>
                </li>
                <li>
                    <span class="iconfont icon-user"></span>
                    <span>首页</span>
                </li>
                <li>
                    <span class="iconfont icon-user"></span>
                    <span>首页</span>
                </li>
        </ul>
    </div>
</template>

<script>
export default{
    name:'Footer',
    data(){
        return{
            msg:'这是底部！',
        };
    },
};
</script>

<style lang="scss" scoped>
    // .footer{
    //     width: 100%;
    //     height: 100px;
    //     background-color: yellow;
    //     position: fixed;
    //     bottom: 0;
    //     left: 0;
    // }
    .footer{
        width: 100%;
        height: 100px;
        background-color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        font-size: 28px;
        ul{
            display: flex;
            height: 100px;
            li{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
        }
        .icon-user{
            font-size: 50px;
        }
    }
</style> 